<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <TableFilter />
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        :multiple-selected="false"
        :disable-pageable="false"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :width="column.width" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
  </div>
</template>

<script>
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
// import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import { report } from '@neu/dcom-ui/api/malfunction'

export default {
  name: 'MalfunctionReportPage',
  components: {
    TableFilter,
    // ActionBar,
    PageableTable
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      r: report,
      insideColumns: [
        { title: '服务厅局', key: 'service_unit_name' },
        { title: '故障处理（件）', key: 'all_count' },
        { title: '机房及配套设施类', key: 'a01_count' },
        { title: '网络类', key: 'a02_count' },
        { title: '安全类', key: 'a03_count' },
        { title: '服务器类', key: 'a04_count' },
        { title: '存储设备类', key: 'a05_count' },
        { title: '资产管理类', key: 'a06_count' },
        { title: '文档类', key: 'a07_count' },
        { title: '其他辅助类', key: 'a08_count' },
        { title: '服务扩展类', key: 'a09_count' }
      ]
    }
  },
  methods: {
    responseFormatter: function(data) {
      return data.map(it => {
        it.all_count = it.a01_count + it.a02_count + it.a03_count + it.a04_count + it.a05_count + it.a06_count + it.a07_count + it.a08_count + it.a09_count
        return it
      }
      )
    }
  }
}
</script>
